<template>
<div>
    <aa></aa>
    <main>
        <div class="login">
            <div class="left">
                <a @click="login" href="javascript:;" :class="{choose:choose}">快速登录</a>
                  <a @click='pwd' href="javascript:;" :class="{choose:!choose}">密码登录</a>
                  <div  style="border-bottom:0" ><input  type="text" placeholder="手机号码" v-model='phone'></div>
                  <h5 style="font-weight: 400;
    font-size: 14px;
    padding-top: 5px;color:#ee3843">{{phone1}}</h5>
                   <div class="yz"><input :type="choose?'text':'password'" :placeholder="choose?'验证码':'请输入密码'" v-model='upwd'><span :style="{'background-color':'#ee3843',left:'100px',border:'0',color: 'white',display:yzm?'block':'none'}">{{yy}}</span><span v-show="choose" @click='getyzm'>获取验证码</span></div>
                   <h5 style="font-weight: 400;
    font-size: 14px;
    padding-top: 5px;color:#ee3843">{{pwd1}}</h5>
                   <div class="login-l"><a @click="login1" href="javascript:;">登录</a> <router-link to="/forget" > <span v-show="!choose">忘记密码?</span> </router-link> </div>
            </div>
            <div class="right">
               <p>还没有帐户:</p>
               <router-link to="/register">立即注册</router-link><img src="/img/jiantou.png" alt="">
            </div>
        </div>
    </main>
     <my-footer></my-footer>
    </div>
   
</template>
<script>
import aa from '../components/OtherHeader.vue'
import MyFooter from '../components/MyFooter.vue'
import {mapState,mapMutations} from 'vuex'
import chuan from '../../public/js/chuan.js'
export default {
    components:{aa,MyFooter, MyFooter},
    data(){
        return{
           choose:true,
           phone:'',
           upwd:'',
           phone1:'',
           pwd1:'',
           yzm:false,
           yy:''
        }
    },
     computed:{
       ...mapState(['city','uid'])
       
    },
    methods:{
        ...mapMutations(['setUserName','setUid']),
        login(){
            this.upwd='';
            this.phone='';
            this.choose=true;
            this.pwd1='';
            this.phone1='';
             this.yzm=false;
        },
        getyzm(){
            function random(max,min){
 return Math.round(Math.random()*(max-min)+min);
}
            this.yzm=true;
            var str="1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";
            var res='';
            for(var i=0;i<4;i++){
            res+=str[random(0,61)];
            }
            this.yy=res;
        },
        pwd(){
              this.upwd=''
            this.phone='';
            this.choose=false;
            this.pwd1='';
            this.phone1='';
             this.yzm=false;
        },
        login1(){
            if( !this.phone ||!this.upwd  ){
                this.phone1='';
                this.pwd1='';
                !this.phone?this.phone1='手机号不能为空':this.pwd1=this.choose?'验证码不能为空':'密码不能为空';
              return
           }else{
                this.phone1='';
                this.pwd1='';
                if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone)){
                   this.phone1='请输入正确的手机号';
                   return;
               }
               if(!this.choose){if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(this.upwd)){
                  this.pwd1='密码不符合规则，请填写8到16位数字加字母';
                  return;
              }}else{
                  if(this.yy==''){
                      this.pwd1='请获取验证码'
                  return
                  }else if(this.yy!=this.upwd){ this.pwd1='验证码错误'
                  return}
                 
              }
               
           }
            this.axios.post('/v1/user/login',`mobile=${this.phone}&pwd=${this.choose?'':this.upwd}`).then(res=>{
                if(res.data.msg){
                this.setUserName(this.phone);
                this.setUid(res.data.msg)
                if(this.$route.query.history){
                    chuan.$emit('data',1)
                this.$router.go(-1,)
            }else{
                this.$router.push('/')
                } 
            }else{
                this.pwd1='密码错误'
            }
            })
            
            
        }
    },
    mounted() {
        (function scrollWindow(){
  window.scrollTo(0,0);
})();
    },
}
</script>
<style scoped>
main{
    position: relative;
    margin: 0 auto;
    background-image: url('/img/login_banner2.jpg');
    height:600px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
main>.login::after{
    content: '';
    display: block;
    clear: both;
}
main>.login{
    position: absolute;
    width:540px;
    height: 280px;
    padding: 70px 80px;
   top: calc(50% - 210px);
   left: calc(50% - 350px);
   background-color: white;
}
.login .left{
    width: 380px;
    height: 100%;
    border-right: 1px solid #eeeeee;
}
.login .right{
    position: relative;
    width: 159px;
    height: 100%;
    right: -26px;
    text-align: center;
    padding-top: 114px;
}
.login .right p{
    font-size: 14px;
    text-indent:20px;
}
.login .right a{
    color:#ee3843;
    font-size: 14px;
    text-decoration: none;
}
.login .left>a:hover{
    color:#ee3843
}
.login .right img{
    position: absolute;
    right: 30px;
    top: 139px;    
}
.login>div{
    float: left;
}
.left>a{
    height: 40px;
    color:black;
    font-size: 14px;
    display: inline-block;
    width: 140px;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
}
.left .choose {
    background-image: url('/img/login_bottom.png');
    background-repeat: no-repeat;
    background-position: bottom;
    color:#ee3843;
}
.left>div{
    border-top: 1px solid #eeeeee;
       border-bottom: 1px solid #eeeeee;
    width: 280px;
    height: 70px;
}

.left>div>input{
    width: 280px;
    border: 0;
    outline: none;
    height: 70px;
}
.left .yz{
    position: relative;
}
.left .yz span{
    width: 80px;
    position: absolute;
    top: calc(50% - 16px);
    right: 0;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ee3843;
    text-align: center;
    color:#ee3843;
    border-radius: 5px;
}
.left .login-l{
    background-color: #ee3843;
    height: 45px;
    border-radius: 5px;
    margin-top: 50px;
    position: relative;
}
.left .login-l span{
    position: absolute;
    top:-49px;
    right: 0;
    font-size: 14px;
    color:#ee3843
}
.left .login-l a{
    display: inline-block;
    color:white;
    width: 100%;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 15px;
    text-decoration: none;
}
</style>
